<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="img/icon-mogujie.png" type="image/x-icon">
        <title>蘑菇街-时尚目的地</title>
        <meta name="keywords" content="买衣服，先逛蘑菇街">
        <meta name="description"
            content="蘑菇街，是中国领先的时尚目的地。公司通过形式多样的时尚内容，种类丰富的时尚商品，以及结合红人直播、买手选款+智能推荐的售卖方式，让人们在分享和发现流行趋势的同时，尽情享受优质的购物体验。2011年，蘑菇街正式上线，2016年1月与美丽说战略融合，公司旗下包括：蘑菇街、美丽说、uni等产品与服务。">
        <link rel="stylesheet" href="css/reset1.css">
        <link rel="stylesheet" href="css/public1.css">
        <link rel="stylesheet" href="css/index1.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
			.container span{word-break:normal; width:220px; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ; padding: 5px;}  
			a{
				color: #000000;
				font-weight: 100;
			}
			a:hover {
				text-decoration: none;
				color: #000000;
			}
			#titleBT{
				display: inline; font-size: 18px;
			}
			#xiaosanjiao {
			width:0;
			height:0;
			overflow:hidden;
			border:5px solid transparent;
			border-bottom-color:red;//top就是倒三角，bottom就是上三角，left,right类似
			}
			.yangshi{
				margin-top: 20px;
			}
			.container img{
				width: 100px;height: 100px;
			}
		</style>
    </head>
    
    <body>
        <!-- 顶部悬浮搜索栏 -->
        <div id="top_search">
            <section>
                <a href="" class="title">
                    <h1>蘑菇街</h1>
                    <img src="img/MoGuJie.png" alt="">
                </a>
                <div class="search-bar">
                    <form action="">
                        <input type="search" placeholder="口红">
                        <input type="submit" value="">
                    </form>
                </div>
                <a href="">
                    <span>消息</span>
                </a>
                <a href="">
                    <span>收藏</span>
                </a>
                <a href="cart.html">
                    <span>购物车</span>
                </a>
                
                <a href="login&register.html">
                    <img src="img/login.png" alt="">
                    <p>登录</p>
                    <span></span>
                </a>
                <ul class="top_usermenu">
                    <li>
                        <p>我的订单</p>
                    </li>
                    <li>
                        <p>个人设置</p>
                    </li>
                    <li>
                        <p>退出</p>
                    </li>
                </ul>
            </section>
        </div>
    
        <!-- 导航栏 -->
        <header>
            <section>
                <ul>
                    <li>
                        <a href="index.html">
                            <img src="img/home.png" alt=""> 首页
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/market.png" alt=""> 商城
                        </a>
                    </li>
                    <li>
                        <a href="">
                            我的订单
                        </a>
                    </li>
                    <li>
                        <a href="">
                            关于我们 <img src="img/downarrow.png" alt="">
                        </a>
                        <div class="aboutUs">
                            <div class="top">
                                <div>
                                    <p>新手帮助</p>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">常见问题</a>
                                        </li>
                                        <li>
                                            <a href="">自助服务</a>
                                        </li>
                                        <li>
                                            <a href="">联系客服</a>
                                        </li>
                                        <li>
                                            <a href="">意见反馈</a>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <p>权益保障</p>
                                    <span></span>
                                    <ul>
                                        <li>全国包邮</li>
                                        <li>7天无理由退货</li>
                                        <li>退货运费补贴</li>
                                        <li>限时发货</li>
                                    </ul>
                                </div>
                                <div>
                                    <p>支付方式</p>
                                    <span></span>
                                    <ul>
                                        <li>微信支付</li>
                                        <li>支付宝</li>
                                        <li>白付美支付</li>
                                    </ul>
                                </div>
                                <div>
                                    <P>移动客户端下载</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            蘑菇街
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/190221_3l1eje914h3h6ch88ce2l6eh0jl17_260x260.png"
                                                alt="">
                                        </li>
                                        <li>
                                            美丽说
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/190221_60dd5ic9e009acbjb005c8c2k8k89_260x260.png"
                                                alt="">
                                        </li>
                                        <li>
                                            uni引力
                                            <img src="https://s10.mogucdn.com/mlcdn/c45406/181029_1e2kfd9la7jg28063eleikgj3k033_158x144.png"
                                                alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <P>商家服务</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">商家入驻</a>
                                        </li>
                                        <li>
                                            <a href="">蘑菇街商学院</a>
                                        </li>
                                        <li>
                                            <a href="">商家社区</a>
                                        </li>
                                        <li>
                                            <a href="">规则中心</a>
                                        </li>
                                        <li>
                                            <a href="">规则众议院</a>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <P>关于我们</P>
                                    <span></span>
                                    <ul>
                                        <li>
                                            <a href="">招聘信息</a>
                                        </li>
                                        <li>
                                            <a href="">联系我们</a>
                                        </li>
                                        <li>
                                            <a href="">有害信息举报</a>
                                        </li>
                                        <li>
                                            <a href="">用户隐私保护</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="bottom">
                                <p>©2019 Mogu.com 杭州卷瓜网络有限公司</p>
                                <p>
                                    营业执照：<a
                                        href="">913301065526808764</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;增值电信业务经营许可证：<a
                                        href="">浙B2-20110349</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">安全责任书</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>
                                    浙公网安备 33010602010221号&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">互联网医药信息服务资格证书编号：(浙)-经营性-2018-0002</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">浙网食A33010003</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                        href="">出版物网络交易平台服务经营备案证</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>
                                    <a href="">(浙)网械平台备字[2018]第00006号</a>&nbsp;&nbsp;&nbsp;|
                                </p>
                                <p>联系电话：400-8158-666（在线时间：09：00-22：00）浙江省杭州市西湖区古墩路99号浙商财富中心1号楼</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
        </header>
        <div id="vuebox">
        <!-- 搜索栏 -->
        <div id="search">
            <a href="">
                <h1>蘑菇街</h1>
                <img src="img/MoGuJie.png" alt="">
            </a>
            <section>
                <div class="category">
                    <img src="img/category.png" alt="">
                    目录
                    <article>
                        <div class="left">
                            <span>主题市场</span>
                            <ul class="theme_list">
    
                            </ul>
                        </div>
                        <div class="center">
                            <span>热门品牌</span>
                            <a href="" class="total">全部品牌&gt;</a>
                            <ul class="hot_list">
    
                            </ul>
                        </div>
                        <div class="right">
                            <span>流行话题</span>
                            <a href="" class="total">全部话题&gt;</a>
                            <ul class="popular_list">
    
                            </ul>
                        </div>
                    </article>
                </div>
                <div class="search-bar">
                    <form action="">
                        <input type="search" placeholder="上衣" v-model="shopName">
                        <input type="submit" @click.stop="selectShop()" value="">
                    </form>
                </div>
                <a href="">
                    <span>消息</span>
                </a>
                <a href="">
                    <span>收藏</span>
                </a>
                <a href="cart.html">
                    <span>购物车</span>
                </a>
                <a href="">
                    <span>
                        &nbsp;&nbsp;&nbsp;APP
                        <div class="appCode"></div>
                    </span>
                </a>
                <a href="login&register.html">
                    <img src="img/login.png" alt="">
                    <p>登录</p>
                    <span></span>
                </a>
                <ul class="usermenu">
                    <li>
                        <p>我的订单</p>
                    </li>
                    <li>
                        <p>个人设置</p>
                    </li>
                    <li>
                        <p>退出</p>
                    </li>
                </ul>
            </section>
        </div>
		<div class="container" style="width: 1700px; margin-bottom: -10px; position: relative; right: 25px;">
            <span id="titleBT" @click="commolist()" style="">商品</span>
            <span id="titleBT" @click="brandlist()" style="margin-left: 50px;">品牌</span>
            <span id="titleBT" @click="userlist()" style="margin-left: 50px;">用户</span>
            <span id="titleBT" @click="shoplist()" style="margin-left: 50px;color: red;">店铺</span>
		</div>
		<div style="position: relative; top: 20px; left: 417px; width: 1700px;">
			<div id="xiaosanjiao"></div>
		</div>
		<div>
			<hr style="background-color: red;height: 1px; border: none;"/>
		</div>
		
	<div class="container" style="width: 1740px;">
		<div v-if="shops == null" class="row" style="position: relative;
				left: 15px;
				width: 1670px;
				height: 40px;
				background: #FFECEC;
				border: 1px solid #fee5ea;	
				padding: 10px 30px 10px 20px;
				margin-top: 10px;
				margin-bottom: 30px;">
			抱歉！没有找到相关的店铺。
		</div>
		<div v-if="shops != null" v-for="(shop,index) in shops" class="row" style="position: relative;
				left: 15px;
				width: 1690px;
				height: 413px;
				background: #f5f5f5;
				border: 1px solid #f1f1f1;
				border-radius:10px 10px 10px 10px;
				margin-top: 20px;
				margin-bottom: 10px;">
				<div style="height: 50px; position: relative; left: 25px; top: 30px;">
					<a href="">
						<img :src="shop.headpic" >
						<div class="yangshi">
							<div style="font-weight: 500; font-size: 17px; margin-top: 20px;">{{shop.shopname}}</div>
							<div>
								<div style=" margin-top: 5px;">销量：1.6万</div>
								<div style="margin-top: 5px;">粉丝：436</div>
							</div>
						</div>
					</a>
				</div>
				<div style="width: 1450px; height: 357px; position: relative; top: -22px; left: 220px;">
					<a href="#" style="width: 220px; height: 357px; margin-left: 17px;" v-for="(commo,index) in shop.commodities.slice(0, 5)">
						<img :src="commo.headpic" style="width: 220px; height: 297px; border-radius: 10px 10px 0 0;">
						<div style="height: 60px;
						width: 220px;
						background-color: white;
						border-radius:0 0 10px 10px;">
						<span style="font-size: 10px;
						text-overflow: ellipsis;
						max-width: 50em;
                        overflow: hidden;
                        white-space: nowrap;">
                            {{commo.commname}}
                        </span>
							<div>
								<span style="display: inline; font-size: 18px;">￥{{commo.price}}</span>
							</div>
						</div>
					</a>
				</div>
		</div>
    </div>
</div>
</body>
</html>
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script type="text/javascript">
	var vm = new Vue({
        el:"#vuebox",
        data:{
            shops:{},
            shopName:""
        },
        methods:{
            selectShop:function(){
                axios.get("/selectshop/name",{params:{"shopName":this.shopName}}).then(res=>{
                    this.shops = res.data;
                })
            },
            commolist:function () {
                $.cookie("commOrTypeName",this.shopName);
                window.location.href = "commolist.html";
            },
            shoplist:function () {
                $.cookie("shopName",this.shopName);
                window.location.href = "shoplist.html";
            },
            brandlist:function () {
                $.cookie("brandName",this.shopName);
                window.location.href = "brandlist.html";
            },
            userlist:function () {
                $.cookie("userName",this.shopName);
                window.location.href = "userlist.html";
            },
            shopName:function () {
                var shopName = $.cookie("shopName");
                this.shopName = shopName;
                this.selectShop();
            }
        },
        mounted(){
            this.shopName();
        }
    });
</script>